<style type="text/css">
.title{
	width: 100%;
	background:#F0F7FF;
	color: rgba(44,57,73,1);
	font-size: 20px;
    font-weight: bold;
	height:50px;
	padding:12px;
}
.kuang{
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
	border-radius: 16px;
	width:90%; margin:0 auto;
	min-height:600px;
	margin-bottom: 50px;
}
.bgcss{
	position:absolute;
	width:100%;
	height:40px;
	background:#F0F7FF;
	top:0px;
	
}
</style>
<div class="ui-g">
    <div class="ui-g-12 kuang">
        <p-scrollPanel [style]="{width: '100%', height: '100%'}">
            <div style="padding:1em;line-height:1.5">
                <p-organizationChart [value]="orgTree" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)">
                </p-organizationChart>
            </div>

        </p-scrollPanel>
    </div>


    <div class="ui-g-12 kuang">
        
        <p-treeTable [value]="treeSource" [rowHover]="true" [responsive]="true">
            
            <ng-template pTemplate="caption">
               <div class="title"> iPAN Member ID:{{selectedCode}}</div>
            </ng-template>
            
            <ng-template pTemplate="header">
                <tr>
                    <th>{{'MY RECRUIT ID'|translate}}</th>
                    <th>{{'RECRUIT TOTAL COMMISSION'|translate}}</th>
                    <th>{{'RECRUIT COMMISSION PAID'|translate}}</th>
                    <th>{{'MY REFERRAL TOTAL *(20% OF RECRUIT COMMISSION)'|translate}}</th>
                    <th>{{'MY REFERRAL PAID'|translate}}</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                <tr>
                    <td>
                        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        {{rowData.name}}
                    </td>
                    <td style="color: #218D08;">{{rowData.total_commission}}</td>
                    <td>{{rowData.current_commission}}</td>
                    <td>{{rowData.total_commission * 0.2}}</td>
                    <td style="color: #E54C2A;">{{rowData.my_referral_paid}}</td>
                </tr>
            </ng-template>
        </p-treeTable>
    </div>
</div>